<template>
    <div class="outmain ba_f">
        <div class="maintitle">门店活动</div>
        <el-button type="primary" size="medium" @click="handleEdit" class="mar_t20">新增活动</el-button>
        <el-table
                v-loading="listLoading"
                :element-loading-text="elementLoadingText"
                :data="list"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="setSelectRows">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="活动类型"
            >
            </el-table-column>
            <el-table-column
                    prop="startTime"
                    label="活动时间"
            >
                <template slot-scope="scope">
                    <div v-if="scope.row.startTime">{{scope.row.startTime.substring(0,10)}}-{{scope.row.endTime.substring(0,10)}}</div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="details"
                    label="活动规则"
            >
            </el-table-column>
            <el-table-column
                    prop="display"
                    label="状态"
            >
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                               @change="changeSwitch(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button
                            type="text"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button
                            type="text"
                            @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.pagesize"
                :current-page.sync='page.currentPage'
                @current-change="handleCurrentChange">
        </el-pagination>
        <edit ref="edit" @fetchData="fetchData"></edit>
    </div>
</template>
<script>
    import Edit from "./components/activityedit";
    import {getActivityList, changeActivity, activityDel} from "@/api/home";

    export default {
        components: {Edit},
        created() {
            this.fetchData();
        },
        data() {
            return {
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                let params = {
                    page: this.page.currentPage,
                }
                const {data, count} = await getActivityList(params);
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            handleEdit(row) {
                if (row.id) {
                    this.$refs["edit"].showEdit(row);
                } else {
                    this.$refs["edit"].showEdit();
                }
            },
            setSelectRows(val) {
                this.selectRows = val;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            async changeSwitch(row) {
                const {msg} = await changeActivity({id: row.id, display: row.display});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await activityDel({id: row.id});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await activityDel({id});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
        }
    }
</script>
